<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"
        name="viewport">
    <title>多人聊天室</title>
    <link rel="stylesheet" type="text/css" href="assets/css/style.css" />
    <!--[if lt IE 8]><script src="assets/js/json3.min.js"></script><![endif]-->
    <!-- <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script> -->
    <script src="assets/js/socket.io.js"></script>

</head>

<body>
    <!-- 登录窗体 -->
    <div id="loginbox">
        <!-- <img src="assets/images/head-img.jpg" class="head-img" alt=""> -->
        <div class="head-img"></div>
        <h2 class="title">请先输入你在聊天室的昵称</h2>
        <input type="text" placeholder="请输入用户名" id="username" name="username" />
        <input type="button" value="提交" onclick="CHAT.usernameSubmit();" />
    </div>
    <!-- 聊天窗体 -->
    <div id="chatbox" style="display:none;">
        <div class="chatbox-title">
            <div style="line-height: 40px;color:#fff;">
                <span style="text-align:left;margin-left:10px;">WebSocket多人聊天室</span>
                <span style="float:right; margin-right:10px;"><span id="showusername"></span> |
                <a href="javascript:;" onclick="CHAT.logout()" style="color:#fff;">退出</a></span>
            </div>
        </div>
        <!-- 聊天窗体 -->
        <div id="doc">
            <div id="chat">
                <!-- 聊天内容展示区域 -->
                <div id="message" class="message">
                    <!-- 聊天室在线人数 -->
                    <div id="onlinecount"></div>
                </div>
                <!-- 聊天内容输入区 -->
                <div class="input-box">
                    <div class="input">
                        <input type="text" maxlength="140" placeholder="请输入聊天内容，按Enter发送" id="content" name="content">
                    </div>
                    <div class="action">
                        <button type="button" id="mjr_send" onclick="CHAT.submit();">发送</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="assets/js/client.js"></script>
</body>

</html>